<template>
  <div class="menu-create-or-edit">
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        {{ isEdit ? '编辑菜单' : '添加菜单' }}
      </div>
      <el-form ref="form" :model="form" label-width="80px">
       
      </el-form>
    </el-card> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ isEdit ? "编辑菜单" : "添加菜单" }}</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        > -->
      </div>
      <!-- 需要的是表单功能 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径">
          <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="form.parentId" placeholder="请选择上级菜单">
            <!-- <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option> -->
            <!-- 请求服务端数据 -->
            <el-option label="无上级菜单" :value="-1"> </el-option>
            <el-option
              v-for="item in parentMenuList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="前端图标">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="form.shown">
            <el-radio label="true">是</el-radio>
            <el-radio label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.description"></el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<!-- 将编辑和创建封装起来。 -->

<script>
import { getEditMenuInfo, createOrderUpdateMenu } from "@/services/menu";
import { Message } from "element-ui";

export default {
  // 导出当前组件的配置对象
  name: "CreateOrEdit",
  // 通过props接受父组件的传值，判断当前是那种功能（添加和编辑）
  props: {
    isEdit: {
      type: Boolean,
      // 默认为添加功能
      default: false,
    },
  },
  data() {
    return {
      form: {
        // 默认值
        parentId: -1,
        name: "name",
        path: "./",
        herf: "./",
        icon: "2",
        orderNum: 1,
        description: "简介",
        shown: "false",
      },
      // 保存上级菜单列表的。
      parentMenuList: {},
    };
  },
  created() {
    this.loadMemuInfo();
  },
  methods: {
    async loadMemuInfo() {
      // 路由上有id信息之后，是编辑。
      // 路由上没有id信息就是新增。
      const id = this.$route.params.id || -1;
      // ()表示调用
      const { data } = await getEditMenuInfo(id);
      console.log(data);
      if (data.code === "000000") {
        this.parentMenuList = data.data.parentMenuList;
        // 如果存在menuInfo
        if(data.data.menuInfo){
          this.form = data.data.menuInfo;
        }
      }
    },
    
    async onSubmit() {
      const data = await createOrderUpdateMenu(this.form);
      if (data.data.code === "000000") {
        Message.success(data.data.mesg);
        this.$router.push({
          name: "menu",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
